<template>
  <div class="box">
    <div class="card">
      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="i in toplist" :key="i.articalId">
          <div class="cardbox" @click="toArtical(i.articalId + 'WOWO')">
            <img :src="i.cover" alt="" />
            <p class="title">{{ i.t }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="header">
      <h2><i class="el-icon-document"></i> 文章列表</h2>
    </div>
    <div class="content">
      <ul class="infinite-list" v-infinite-scroll="load" style="overflow: auto">
        <li @click="toArtical(i._id + 'WOWO')" v-for="i in list" :key="i._id">
          <div class="img">
            <img :src="i.cover" alt="" />
          </div>
          <div class="info">
            <h3>{{ i.t }}</h3>
          </div>
        </li>
      </ul>
      <p v-if="loading" class="tips">加载中...</p>
      <p v-if="noMore" class="tips">没有更多了</p>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      list: [],
      toplist: [],
      loading: false,
      noMore: false,
      count: 0,
    };
  },
  methods: {
    toArtical(id) {
      this.$router.push("/home/artical/" + id).catch(()=>console.log())
    },
    load() {
      this.loading = true;
      let length = this.list.length;
      setTimeout(() => {
        this.count += 5;
        this.$request({
          url: "/artical/getall",
          method: "post",
          data: qs.stringify({
            count: this.count,
          }),
        }).then((success) => {
          success.data.forEach((i) => {
            this.list.push(i);
          });
        });
        if (length == this.list.length) {
          this.noMore = this.loading;
        }
        this.loading = false;
        setTimeout(() => {
          this.noMore = false;
        }, 500);
      }, 1000);
    },
  },
  mounted() {
    this.$request({
      url: "/artical/getall",
      method: "post",
      data: qs.stringify({
        count: this.count,
      }),
    }).then((success) => {
      this.list = success.data;
    });
    this.$request({
      url: "/artical/topArtical",
      method: "get",
    }).then((success) => {
      this.toplist = success.data;
    });
  },
};
</script>

<style scoped>
ul {
  margin-top: 20px;
  height: 800px;
}
ul li {
  display: flex;
  padding: 10px;
  overflow: hidden;
  height: 140px;
  margin-bottom: 20px;
  background-color: #f4f4f4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  line-height: 1.4;
  cursor: pointer;
}
.img img {
  width: 120px;
  height: 120px;
}
.info {
  margin-left: 20px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.cardbox img {
  width: 500px;
  height: 300px;
}
.title {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 50px;
  color: white;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
}
.tips {
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #999aaa;
  font-size: 20px;
  background-color: #f4f4f4;
}
</style>